<template>
    <div id="main">
        <div id="top">
            <van-icon id="pcp" name="user-circle-o" />
            <div id="head">
                <p id="p1">登录/注册></p>
                <p id="p2">签到领银铃铛></p>
            </div>
            <div id="rig">
                <van-icon class="icon" name="search" />
                <van-icon class="icon" name="setting-o" />
                <van-icon class="icon" name="comment-o" />    
            </div>
        </div>
        <div id="mid">
            <div class="block" v-for="i in arr" :key="i">
                <p id="p3">0</p>
                <p id="p4">{{i}}</p>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                arr: ["礼券","银铃铛","礼品卡","余额","金铃铛"]
            }
        },
    }
</script>

<style lang="scss" scoped>
    #main{
        background: rgb(255, 244, 244);
        #top{
            display: flex;
            #pcp{
                font-size: 15vw;
                padding-top: 4vw;
                padding-left: 4vw;
                color: #aaa;
            }
            #head{
                padding-top: 5vw;
                padding-left: 4vw;
                #p1{
                    font-size: 5vw;
                    font-weight: bold;
                }
                #p2{
                    margin-top: 1.5vw;
                    border-radius: 30%;
                    font-size: 3.5vw;
                    background: #ddd;
                    padding-left: 1vw;
                }
            }
            #rig{
                margin-left: 25vw;
                margin-top: 6vw;
                .icon{
                    padding-left: 4vw;
                    font-weight: bold;
                }
            }
        }
        #mid{
            display: flex;
            margin-top: 5vw;
            padding-bottom: 4vw;
            .block{
                padding-left: 8vw;
                #p3{
                    text-align: center;
                    font-size: 4vw;
                }
                #p4{
                    padding-top: 1vw;
                    text-align: center;
                    font-size: 4vw;
                }
            }
        }
    }
</style>